{namespace dk.bookeditor.templates}

/**
 * @param email
 * @param logoutUrl
 */
{template .base}

<div id="header">
  <div id="header-left">
    <div id="new-document" class="{css dk-button} {css new-doc-button}">
      Create Document
    </div>
  </div>
  
  <div id="header-title">
    <span id="title"></span>
    
    <div id="title-buttons">
      <span id="edit" class="{css dk-toggle-button} {css dk-toggle-button-checked}">Edit</span>
      <span id="show-html" class="{css dk-toggle-button}">HTML</span>
      <span id="show-xml" class="{css dk-toggle-button}">XML</span>
    </div>
  </div>
  
  <div id="header-right">
    <span id="email">{$email}</span>
    {sp}|{sp}
    <a href="/faq.jsp" target="_blank">FAQ</a>
    {sp}|{sp}
    <a href="/" target="_blank">About</a>
    {sp}|{sp}
    <a href="{$logoutUrl}">Sign out</a>
  </div>

  <div style="clear: both"></div>
</div>

<div id="content">

  <div id="leftcol">
    <div id="picker"></div>
  </div>

  <div id="content-viewer">
    <div id="viewer"></div>
    <div id="xml-viewer" style="display:none">
    Load a document to view its DocBook XML.
    </div>
    <div id="html-viewer" style="display:none">
    Load a document to view it as published HTML.
    </div>
  </div>

  <div id="rightcol">

    <div>
      <div id="save" class="{css dk-button} {css save-button}">Save</div>
      <div id="status"></div>
      {call .keyboardShortcuts data="all" /}
    </div>
    
    <div id="promo">
      <a href="http://www.amazon.com/gp/product/1449381871?ie=UTF8&tag=bolinfestcom-20&link_code=as3&camp=211189&creative=373489&creativeASIN=1449381871"
         target="_blank">
        <img id="cover" src="/cover_big.png" alt="Closure: The Definitive Guide">
      </a>
      NJEdit was used to draft{sp}
      <i>Closure: The Definitive Guide</i>.
      If you are writing a technical book or
      online essays that include code samples,
      then this may be the right tool for you.
      // <br>
      // <a href="learnmore.html" target="_blank">Learn more</a>
    </div>
  </div>

</div>

<div style="clear: both"></div>
{/template}

/***/
{template .keyboardShortcuts}
<div>
<p>Keyboard shortcuts<br>
<ul>
  <li><b>ctrl-s</b> save
  <li><b>shift-enter</b> create new paragraph
  <li><b>ctrl-enter</b> toggle paragraph type forward
  <li><b>ctrl-shift-enter</b> toggle paragraph type backwards
</ul>
<p>Formatting and the DocBook XML it generates when saved<br>
<ul>
  <li><code>`some code`</code> becomes <code>&lt;code>some code&lt;/code></code>
  <li><code>::some text::</code> becomes <code>&lt;emphasis>some text&lt;/emphasis></code>
  <li><code>[[http://www.google.com/]]</code> becomes <code>&lt;ulink url="http://www.google.com/"/></code>
  <li><code>[[xref:classes]]</code> becomes <code>&lt;xref linkend="classes"/></code>
</ul>
</div>
{/template}
